
<template>
  <div class="form-design-setting-container">
    <el-form size="" label-width="100px" label-position="left">
      <el-tabs v-model="tabs1">
        <el-tab-pane label="题目设置" name="1">
          <el-form-item label="是否必填">
            <el-checkbox v-model="formComponent.require" label="必填" />
          </el-form-item>
          <el-form-item label="宽度设置">
            <el-select v-model="formComponent.width" placeholder="请选择">
              <el-option
                v-for="item in designOptions.widthOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-tab-pane>
      </el-tabs>
      <el-tabs v-model="tabs2">
        <el-tab-pane label="题目关联" name="1">
          <el-form-item label="题目关联">
            <el-switch v-model="formComponent.connect" inline-prompt active-text="关联" inactive-text="不关联" :active-value="1" :inactive-value="0"/>
          </el-form-item>
          <el-form-item label="关联题目" v-if="formComponent.connect">
            <el-button type="primary" link @click="addConnect">添加</el-button>
          </el-form-item>
          <el-table v-if="formComponent.connect" :data="formComponent.default" style="width: 100%" class="connect-table">
            <el-table-column prop="label" label="选项" align="center">
              <template #default="{row}">
                <span>{{row.label || row.placeholder}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="关联题目" align="center">
              <template #default="{row}">
                <span>{{getQuetionById(row)}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="" align="center">
              <template #default="{row}">
                <i v-if="row.connect.length" class="iconfont delete" @click="handleConnect(row)">&#xe74b;</i>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-form>
    <el-dialog
      v-model="openConnect"
      title="设置题目关联"
      width="40%"
      append-to-body
    >
      <el-table :data="connectFormData" style="width: 100%" class="connect-table">
        <el-table-column prop="label" label="选项" align="center">
          <template #default="{row}">
            <span>{{row.label || row.placeholder}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="关联题目" align="center">
          <template #default="{row}">
            <el-cascader 
              v-model="row.connect"
              :props="connectProps"
              clearable
              :options="connectOptions"
              collapse-tags
              collapse-tags-tooltip
              max-collapse-tags="1"
            >
              <template #default="{ data }">
                <span>{{data.labelIndex + '. ' + ( data.label || formComponent.labelPlaceholder) }}</span>
              </template>
            </el-cascader>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="openConnect = false">取消</el-button>
          <el-button type="primary" @click="connectSubmit">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, defineProps, computed } from 'vue'
import { designOptions } from "@/views/form/manage/design/config/formCmpConfig.js";
import { useStore } from 'vuex'
import { ElMessageBox, ElMessage } from 'element-plus'

const store = useStore()
const formDesign = computed(()=>{return store.getters.formDesignInfo})
const formComponents = computed(() => {return formDesign.value.formItemList || []});
const currentFormItemId = computed(() => {return formDesign.value.formCmpId});
const connectOptions = computed(()=>{ //获取可关联题目
  return formComponents.value.filter(item => (item.formItemId != currentFormItemId.value && item.type != 'pagenation'))
})
const connectProps = ref({
  label: 'label',
  value: 'formItemId',
  multiple: true, //多选
  checkStrictly: true,
  emitPath: false
})
const props = defineProps({
  formComponent: {
    type: Object,
  },
})
const formComponent = computed(()=>{return props.formComponent})
const tabs1 = ref('1')
const tabs2 = ref('1')
const openConnect = ref(false)
const connectFormData = computed(()=>{return JSON.parse(JSON.stringify(formComponent.value.default))})
const addConnect = () => {
  if(formComponents.value.length == 1){
    ElMessage({
      showClose: true,
      message: '此题为最后一题，没有可选的关联选项',
      type: 'warning',
    })
    return
  }
  openConnect.value = true
}
const connectSubmit = () => {
  formComponent.value.default = JSON.parse(JSON.stringify(connectFormData.value))
  setConnectFlag(formComponent.value.default)
  openConnect.value = false
}
const setConnectFlag = (arr, flag = true) => {
  arr.forEach(item => {
    if(item.connect?.length > 0) {
      item.connect.forEach(id => {
        formComponents.value.find(cmp => {
          if(cmp.formItemId === id){
            cmp.isConnected = flag
            return cmp
          }
        })
      })
    }
  });
}
// 通过id获取题目号
const getQuetionById = (row) => {
  let ques = row.connect.map(id => {
    return formComponents.value.find(item=>item.formItemId == id)
  })
  let indexs = ques.map(item=>item.labelIndex).join(', ')
  return indexs ? `第${indexs}题` : '-'
}
// 删除选项关联题目
const handleConnect = (row) => {
  ElMessageBox.confirm(
      `<div><p style="font-size: 16px;margin-bottom: 15px;">是否删除 ‘${row.label || row.placeholder}’ 所关联题目？</p><span style="font-size: 14px;color: #FF5240;">清除后内容将无法恢复</span></div>`,
      '删除确认',
      {
        dangerouslyUseHTMLString: true,
        confirmButtonText: '确认',
        cancelButtonText: '取消',
      }
  ).then(() => {
    setConnectFlag([row], false)
    row.connect = []
  })
}
</script>

<style lang="scss" scoped>
.radio-box{
  ::v-deep(.el-radio-group){
    width: 100%;
  }
  .radio-item{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 5px 0;
   
    .el-radio{
      margin-right: 5px;
      ::v-deep(.el-radio__label){
        display: none;
      }
    }
    .el-input{
      width: 150px;
    }
  }
  .add-radio-item{
    width: 100%;
    margin-top: 5px;
  }
}
.connect-table{
  margin-top: 15px;
  ::v-deep(.el-table){
    padding-bottom: 20px;
    height: calc(100vh - 230px);
    overflow-y: auto;
    overflow-x: hidden;
  }
  ::v-deep(.el-table) tr.scan-result-table-header {
    background-color: #E6E6E6;
    th {
      background-color: #E6E6E6;
    }
  }
  .delete{
    cursor: pointer;
    color: $mainColor;
  }
}
</style>
